<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>商品信息</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/element/index.css">
	<link rel="stylesheet" href="../css/hsg.css">
	
</head>
<body>
<div id="wrapper" v-cloak>
    <div >
        <div style="padding: 0 20px">
            <div>
                <div style="color: #666; font-weight: bold; border-bottom: 1px solid #ccc; padding: 10px 0; margin-bottom: 20px; font-size: 30px;">商品信息</div>
            </div>
            <div style="margin-top: 10px">
                <div style="border: 1px solid #19a97b;">
                    <div style="padding: 5px; border-bottom: 1px solid #19a97b; color: white; background-color: #19a97b;">商品信息表</div>
                    <div style="border: 1px solid #ccc; padding: 10px">
                        <div class="table-responsive">
                            <div class="nx-table-header" style="position: relative">
                                <button class="btn btn-sm btn-primary" v-on:click="add()">新增</button>
                                <button class="btn btn-sm btn-primary">批量导入</button>
                                <input @click="clickUpload" @change="upload" type="file" multiple ref="file"
                                       style="position:absolute;top:0;left:50px;opacity:0;width:70px;height:30px;">
                                <button class="btn btn-sm btn-primary" v-on:click="downModel">下载模板</button>
								<button class="btn btn-sm btn-primary" v-on:click="downExcel">导出excel</button>
                                <input type="text" placeholder="请输入搜索内容" v-model="name" @keyup.enter="loadTable(1)">
                                <i class="glyphicon glyphicon-search" style="margin-left: -20px"></i>
                            </div>
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>商品编号</th><th>商品名称</th><th>类别</th><th>价格</th><th>图片</th><th>是否审核</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody v-for="obj in objs">
                                <tr>
                                    <td>{{obj.id}}</td>
									<td>{{obj.goodsnumbers}}</td><td>{{obj.goodsnamec}}</td><td>{{obj.types}}</td><td>{{obj.price}}</td><td><img v-if="obj.picavt" :src="'/files/download/'+obj.picavt" class="avatar-table"><img v-else src="../img/no-avater.jpg" class="avatar-table"></td><td><button class="btn btn-primary btn-xs" @click="changeStatus(obj.id)">{{obj.status}}</button></td>
                                    <td>
                                        <button class="btn btn-primary btn-xs" @click="init(obj)">编辑</button>
										
										<button class="btn btn-primary btn-xs" @click="detail(obj.id)">详细</button>
										
                                        <button class="btn btn-danger btn-xs" @click="del(obj.id)">删除</button>                                    </td>
                                </tr>
                                </tbody>
                            </table>
							<!--danhxexiaxnshi-->
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item" v-bind:class="{ disabled: preActive }">
                                        <a class="page-link" href="javascript:void(0)"
                                           v-on:click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1" v-on:click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                                    </li>
                                    <li class="page-item disabled">
                                        <a class="page-link" aria-disabled="true" href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage" v-on:click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                                    </li>
                                    <li class="page-item" v-bind:class="{ disabled: nextActive }">
                                        <a class="page-link" href="javascript:void(0)" v-on:click="loadTable(pageInfo.hasNextPage? (pageInfo.pageNum + 1) : pageInfo.pageNum)">下一页</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" tabindex="-1" role="dialog" id="mod">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">请填写信息</span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <input type="hidden" id="id" name="id" v-model="entity.id">
                        <div  class="form-group"><label class="col-sm-3 control-label">商品编号</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.goodsnumbers" style="width: 160px" placeholder="请输入商品编号" id="goodsnumbers"></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">商品名称</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.goodsnamec" style="width: 160px" placeholder="请输入商品名称" id="goodsnamec"></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">类别</label><div class="col-sm-7"><select class="form-control" v-model="entity.types"><option v-for="item in goodstypesObjs" :value="item.types">{{item.types}}</option></select></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">价格</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.price" style="width: 160px" placeholder="请输入价格" id="price"></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">简介</label><div class="col-sm-7"><textarea type="text" class="form-control" v-model="entity.memo" style="height: 100px" placeholder="请输入简介" id="memo"></textarea></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">图片</label> <div class="col-sm-7"> <el-upload  class="avatar-uploader" action="/files/upload"  :show-file-list="false"  :on-success="picsccs"   :before-upload="picbaul"> <img v-if="picimrl" :src="picimrl" class="avatar"><img v-else-if="picavt" :src="'/files/download/'+picavt" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload> </div></div>
		
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					
                    <button type="button" class="btn btn-primary" @click="update()">保存</button>
                </div>
            </div>
        </div>
    </div>
	<!--m_liangbumod-->
</div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/element/index.js"></script>

<script>
    function checkValid(entity) {
        if (!entity.goodsnumbers || entity.goodsnumbers === "") {alert("商品编号不能为空"); return false;}
if (!entity.goodsnamec || entity.goodsnamec === "") {alert("商品名称不能为空"); return false;}
if (!entity.price || entity.price === "") {alert("价格不能为空"); return false;}
if (entity.price && entity.price !== ""){let reg = /^[0-9]+.?[0-9]*$/; if (!reg.test(entity.price)) {alert("价格必需数字型");return false;}}

        return true;
    }
    
	new Vue({
        el: '#wrapper',
        data: {

            authority: [],
            permission: [],
            storeUser: JSON.parse(localStorage.getItem("user")),
            name: '',
            user: {},
			
			picimrl: '',
//youtupianimrl			
            objs: [],
            pageInfo: {},
            preActive: true,
            nextActive: true,
			picavt:null,
			
			//youxia2sui
			goodstypesObjs:[],
//youxxiabiaoxduan
            entity: {
               picflst:[],
			
            }
        },
        created:
            function () {
                this.loadTable(1);
                this.user = JSON.parse(localStorage.getItem('user'));
                axios.get("/permission/3").then(res => {
                    if (res.data.code === '0') {
                        this.permission = res.data.data;
                    } else {
                        msg('error', res.data.msg);
                    }
                });
                axios.get("/authority").then(res => {
                    if (res.data.code === '0') {
                        this.authority = res.data.data;
                    } else {
                        msg('error', res.data.msg);
                    }
                });
				//youcreatexia2sui
				axios.get("/goodstypesInfo").then(res => {this.goodstypesObjs = res.data.data;});
//youffxiaxbiaoxduan
				

				
            },
        methods: {
            loadTable(pageNum) {
                let name = this.name === '' ? "all" : this.name;
                axios.get("/goodsinfosInfo/page/" + name + "?pageNum=" + pageNum).then(res => {
                    if (res.data.code === '0') {
                        this.objs = res.data.data.list;
                        res.data.data.list.forEach(item=>{
                            if(item.pic) {item.picavt = JSON.parse(item.pic)[0];}
                            //tupianloadtb
							//dhjsuanxx
                        })
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },
			
			detail(id) {window.location = '/end/page/goodsinfos_detail.html?goodsinfosid='+id;},
            init(o) {
                 //if (this.user.level === "管理员")
//                {}
//                else
//                {
//                    msg('warning', '你没有权限操作');
//                    return;
//                }
				
				this.entity.picflst = [];
				
				this.picavt=null;
				
				this.picimrl=null;
				
                this.entity = JSON.parse(JSON.stringify(o));
				if(this.entity.pic) { this.picavt = JSON.parse(this.entity.pic)[0];}
				//tupianxinxiit4
                $('#mod').modal('show');
            },
			//m_liangbuinit
            add() {
				//if (this.user.level === "管理员")
//                {}
//                else
//                {
//                    msg('warning', '你没有权限操作');
//                    return;
//                }
				
				
                this.entity.picflst = [];
				
				this.picavt=null;
				
				this.picimrl=null;
				
				//list23Nfbr
				//ssxessioxnduqxu
                $('#mod').modal('show');
            },
			
            update() {
                if (checkValid(this.entity)) {
                    debugger
                    if (!this.entity.id) {
                        axios.post(
                            "/goodsinfosInfo", this.entity
                        ).then(res => {
                            if (res.data.code === '0') {
                                msg('success', '添加成功');
                                $('#mod').modal('hide');
                                this.loadTable(1);
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    } else {
                        axios.put(
                            "/goodsinfosInfo", this.entity
                        ).then(res => {
                            if (res.data.code === '0') {
                                msg('success', '更新成功');
                                $('#mod').modal('hide');
                                this.loadTable(1);
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    }
                }
            },
			picsccs(res, file) {
                this.picimrl = URL.createObjectURL(file.raw);
                this.entity.picflst.push(res.data.id);
                this.picavt = res.data.id
            },
            picbaul(file) {
                this.entity.picflst = [];
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2000MB!');
                }
                return isJPG && isLt2M;
            },
			//m_tupiansccsbaul
            del(id) {
                //if (this.user.level === "管理员")
//                {}
//                else
//                {
//                    msg('warning', '你没有权限操作');
//                    return;
//                }
				
                let _this = this;
                this.$confirm('确认删除？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'btn-custom-cancel',
                    type: 'warning'
                }).then(function(){
                    axios.delete("/goodsinfosInfo/" + id).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '删除成功');
                            _this.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    });
                }).catch(function() {
                    console.log("取消成功！");
                });
            },
            downModel() {
                location.href = '/goodsinfosInfo/getExcelModel';
            },
			downExcel() {
                location.href = '/goodsinfosInfo/getExcel';
            },
            clickUpload: function (e) {
                if (this.user.level === "管理员")
                {}
                else
                {
                    msg('warning', '你没有权限操作');
                    return;
                }
            },
            upload: function () {
                let files = this.$refs.file.files;
                for (let i = 0; i < files.length; i++) {
                    let formData = new FormData();
                    formData.append('file', files[i]);
                    axios.post('/goodsinfosInfo/upload', formData, {
                        'Content-Type': 'multipart/form-data'
                    }).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '批量导入成功');
                            this.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    })
                }
            },
			//youscwenjian
            changeStatus(id){
                let _this = this;
                axios.get("/goodsinfosInfo/changeStatus/" + id).then(res => {
                    if (res.data.code === '0') {
                        msg('success', '状态修改成功');
                        _this.loadTable(this.pageInfo.pageNum);
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },
			//daxizhxifu
			//x2suilafuxzhi
            logout() {
                logout();
            }
        }
    })
	
</script>
</body>
</html>